<template>
  <div class="app-container">

    <div class="components-container">

      <split-pane :default-percent="gutters[0]" split="vertical" @resize="resize">
        <template slot="paneL">
          <div class="left-container" style="background: #f6f6f6;">
            <el-collapse v-model="openfile">
              <el-collapse-item name="3">
                <template slot="title">
                  <span style="margin-left: 8px">
                    {{$t('bs.recentBrowsing')}}
                  </span>

                </template>
                <div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-ppt" />
                    </div>
                    <div class="file-button-title">
                      WSD4 A1 ST2005 EP...\ppt文档.ppt
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-excel" />
                    </div>
                    <div class="file-button-title">
                      WSD4 A1 ST2005 EP...\excel文档.xls
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-world" />
                    </div>
                    <div class="file-button-title">
                      WSD4 A1 ST2005 EP...\world文档.doc
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-ppt" />
                    </div>
                    <div class="file-button-title">
                      WSD4 A1 ST2005 EP...\ppt文档.ppt
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-excel" />
                    </div>
                    <div class="file-button-title">
                      WSD4 A1 ST2005 EP...\excel文档.xls
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-world" />
                    </div>
                    <div class="file-button-title">
                      WSD4 A1 ST2005 EP...\world文档.doc
                    </div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="0">
                <template slot="title">
                  <span style="margin-left: 8px">
                    {{$t('bs.myCollection')}}
                  </span>

                </template>
                <div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img" />
                    </div>
                    <div class="file-button-title">
                      工具文档.doc
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img" />
                    </div>
                    <div class="file-button-title">
                      操作手册.doc
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img" />
                    </div>
                    <div class="file-button-title">
                      管理条款.doc
                    </div>
                  </div>
                  <div
                    v-contextmenu:contextmenu
                    class="file-button-box"
                    @click.right.stop="rightClick"
                  >
                    <div class="file-button-img-box">
                      <div class="file-button-img" />
                    </div>
                    <div class="file-button-title">
                      员工注意事项.doc
                    </div>
                  </div>

                </div>
              </el-collapse-item>
              <el-collapse-item name="1">
                <template slot="title">
                  <span style="margin-left: 8px">
                    工位
                  </span>

                </template>
                <div>
                  <div style="display: flex;align-items: center;padding: 3px;width: 100%;flex-wrap: nowrap">
                    <div>
                      <el-input
                        v-model="listQuery.title"
                        class="filter-item"
                        placeholder="工位关键字"
                        size="mini"
                        style="width: 220px;"
                      >
                        <template slot="append">
                          <el-button
                            v-waves
                            class="filter-item"
                            icon="el-icon-search"
                            size="mini"
                            type="primary"
                            @click="handleFilter"
                          />

                        </template>
                      </el-input>

                    </div>
                    <el-button
                      v-waves
                      class="filter-item"
                      icon="el-icon-s-operation"
                      size="mini"
                      style="margin-left: 3px"
                      @click="dialog=true"
                    />

                  </div>
                  <!--                  <div class="gwbox">-->
                  <!--                    <div v-contextmenu:contextmenu-->
                  <!--                         class="file-button-box" @click.right.stop="rightClick">-->
                  <!--                      <div class="file-button-img-box">-->
                  <!--                        <div class="file-button-img">-->

                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                      <div class="file-button-title" style="flex-direction: column">-->
                  <!--                        <div>-->
                  <!--                          WSD4 A1 ST2005 EP coating-->
                  <!--                        </div>-->

                  <!--                      </div>-->
                  <!--                      <div class="file-button-right">-->
                  <!--                        ﹥-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                    <div style="width: 100%;display: flex;align-items: center;font-size: 12px;justify-content: center" >-->
                  <!--                      <div style="width: 60%">-->
                  <!--                        <div style="flex: 1">-->
                  <!--                          <el-progress :percentage="80"></el-progress>-->
                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                    </div>-->

                  <!--                  </div>-->
                  <div class="tree-container">
                    <el-tree
                      :data="treedata"
                      :default-expand-all="true"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                    >

                      <span slot-scope="{node, data }">
                        <template v-if="data.children">
                          <div v-if="data.children.length > 0">
                            <i v-if="!node.expanded" class="el-icon-folder" :style="'padding: 0 5px 0 5px'" />
                            <i v-else class="el-icon-folder-opened" :style="'padding: 0 5px 0 5px'" />

                            <span>{{ data.label }}</span>
                          </div>

                          <div v-else>
                            <i class="leaf-node-line" />
                            <i v-if="!node.expanded" class="el-icon-folder" :style="'padding: 0 5px 0 5px'" />
                            <i v-else class="el-icon-folder-opened" :style="'padding: 0 5px 0 5px'" />
                            <!--            <i :style="'font-size: 13px; padding: 0 5px 0 5px'"><svg aria-hidden="true" class=""-->
                            <!--                                                                     data-icon="apartment" fill="currentColor" focusable="false"-->
                            <!--                                                                     height="1em" viewBox="64 64 896 896" width="1em"><path-->
                            <!--              d="M908 640H804V488c0-4.4-3.6-8-8-8H548v-96h108c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H368c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h108v96H228c-4.4 0-8 3.6-8 8v152H116c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h288c8.8 0 16-7.2 16-16V656c0-8.8-7.2-16-16-16H292v-88h440v88H620c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h288c8.8 0 16-7.2 16-16V656c0-8.8-7.2-16-16-16zm-564 76v168H176V716h168zm84-408V140h168v168H428zm420 576H680V716h168v168z"></path></svg></i>-->
                            <span>{{ data.label }}</span>
                          </div>
                        </template>

                        <template v-else>
                          <div style="margin-left: 0px;">
                            <i class="leaf-node-line" />
                            <i class="el-icon-document" :style="'padding: 0 5px 0 5px'" />
                            <!--            <i :style="'font-size: 13px; padding: 0 5px 0 5px'"><svg aria-hidden="true" class=""-->
                            <!--                                                                     data-icon="deployment-unit" fill="currentColor" focusable="false"-->
                            <!--                                                                     height="1em" viewBox="64 64 896 896" width="1em"><path-->
                            <!--              d="M888.3 693.2c-42.5-24.6-94.3-18-129.2 12.8l-53-30.7V523.6c0-15.7-8.4-30.3-22-38.1l-136-78.3v-67.1c44.2-15 76-56.8 76-106.1 0-61.9-50.1-112-112-112s-112 50.1-112 112c0 49.3 31.8 91.1 76 106.1v67.1l-136 78.3c-13.6 7.8-22 22.4-22 38.1v151.6l-53 30.7c-34.9-30.8-86.8-37.4-129.2-12.8-53.5 31-71.7 99.4-41 152.9 30.8 53.5 98.9 71.9 152.2 41 42.5-24.6 62.7-73 53.6-118.8l48.7-28.3 140.6 81c6.8 3.9 14.4 5.9 22 5.9s15.2-2 22-5.9L674.5 740l48.7 28.3c-9.1 45.7 11.2 94.2 53.6 118.8 53.3 30.9 121.5 12.6 152.2-41 30.8-53.6 12.6-122-40.7-152.9zm-673 138.4a47.6 47.6 0 0 1-65.2-17.6c-13.2-22.9-5.4-52.3 17.5-65.5a47.6 47.6 0 0 1 65.2 17.6c13.2 22.9 5.4 52.3-17.5 65.5zM522 463.8zM464 234a48.01 48.01 0 0 1 96 0 48.01 48.01 0 0 1-96 0zm170 446.2l-122 70.3-122-70.3V539.8l122-70.3 122 70.3v140.4zm239.9 133.9c-13.2 22.9-42.4 30.8-65.2 17.6-22.8-13.2-30.7-42.6-17.5-65.5s42.4-30.8 65.2-17.6c22.9 13.2 30.7 42.5 17.5 65.5z"></path></svg></i>-->
                            <span>{{ data.label }}</span>
                          </div>
                        </template>
                      </span>
                    </el-tree>
                  </div>

                  <!--                  <div class="gwbox">-->
                  <!--                    <div v-contextmenu:contextmenu-->
                  <!--                         class="file-button-box" @click.right.stop="rightClick">-->
                  <!--                      <div class="file-button-img-box">-->
                  <!--                        <div class="file-button-img">-->

                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                      <div class="file-button-title" style="flex-direction: column">-->
                  <!--                        <div>-->
                  <!--                          WSD4 A1 ST2005 EP coating-->
                  <!--                        </div>-->

                  <!--                      </div>-->
                  <!--                      <div class="file-button-right">-->
                  <!--                        ﹥-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                    <div style="width: 100%;display: flex;align-items: center;font-size: 12px;justify-content: center" >-->
                  <!--                      <div style="width: 60%">-->
                  <!--                        <div style="flex: 1">-->
                  <!--                          <el-progress :percentage="100" status="success"></el-progress>-->
                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                  </div>-->
                  <!--                  <div class="gwbox">-->
                  <!--                    <div v-contextmenu:contextmenu-->
                  <!--                         class="file-button-box" @click.right.stop="rightClick">-->
                  <!--                      <div class="file-button-img-box">-->
                  <!--                        <div class="file-button-img">-->

                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                      <div class="file-button-title" style="flex-direction: column">-->
                  <!--                        <div>-->
                  <!--                          WSD4 A1 ST2005 EP coating-->
                  <!--                        </div>-->

                  <!--                      </div>-->
                  <!--                      <div class="file-button-right">-->
                  <!--                        ﹥-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                    <div style="width: 100%;display: flex;align-items: center;font-size: 12px;justify-content: center" >-->
                  <!--                      <div style="width: 60%">-->
                  <!--                        <div style="flex: 1">-->
                  <!--                          <el-progress :percentage="75"></el-progress>-->
                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                  </div>-->
                  <!--                  <div class="gwbox">-->
                  <!--                    <div v-contextmenu:contextmenu-->
                  <!--                         class="file-button-box" @click.right.stop="rightClick">-->
                  <!--                      <div class="file-button-img-box">-->
                  <!--                        <div class="file-button-img">-->

                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                      <div class="file-button-title" style="flex-direction: column">-->
                  <!--                        <div>-->
                  <!--                          WSD4 A1 ST2005 EP coating-->
                  <!--                        </div>-->

                  <!--                      </div>-->
                  <!--                      <div class="file-button-right">-->
                  <!--                        ﹥-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                    <div style="width: 100%;display: flex;align-items: center;font-size: 12px;justify-content: center" >-->
                  <!--                      <div style="width: 60%">-->
                  <!--                        <div style="flex: 1">-->
                  <!--                          <el-progress :percentage="50"></el-progress>-->
                  <!--                        </div>-->
                  <!--                      </div>-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                </div>
              </el-collapse-item>
            </el-collapse>

          </div>

        </template>
        <template slot="paneR">

          <div class="filter-container">
            <!--            <el-input size="mini"  v-model="listQuery.title" placeholder="Location No" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Dep No" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Line No" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="MAE NO" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Parts No" style="width: 204px;" class="filter-item"  /><el-input size="mini" v-model="listQuery.title" placeholder="Location No" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Drawing no" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="QG No" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" :placeholder="$t('bs.productionLine')" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="更新人" style="width: 204px;" class="filter-item"  />-->

            <!--            <el-input size="mini" v-model="listQuery.title" placeholder="产品名称" style="width: 204px;" class="filter-item"  />-->

            <!--      <el-input size="mini" v-model="listQuery.title" placeholder="修改记录" style="width: 204px;" class="filter-item"  />-->
            <!--            <el-input size="mini" v-model="listQuery.title" :placeholder="$t('bs.supplier')" style="width: 204px;" class="filter-item"  />-->

            <el-input v-model="listQuery.title" class="filter-item" placeholder="内容" size="mini" style="width: 204px;" />
            <el-select
              v-model="listQuery.range"
              class="filter-item"
              placeholder="范围"
              size="mini"
              style="width: 100px;margin-left: 8px"
              @change="handleFilter"
            >
              <el-option v-for="item in rangelist" :key="item.key" :label="item.label" :value="item.key" />
            </el-select>
            <el-date-picker
              v-model="listQuery.time"
              placeholder="修改日期"
              size="mini"
              style="top:-4px;margin-left: 8px"
              type="date"
            />

            <!--      <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">-->
            <!--        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />-->
            <!--      </el-select>-->
            <el-select
              v-model="listQuery.type"
              class="filter-item"
              clearable
              placeholder="组成结构"
              size="mini"
              style="width: 204px;margin-left: 8px"
            >
              <el-option
                v-for="item in calendarTypeOptions"
                :key="item.key"
                :label="item.display_name+'('+item.key+')'"
                :value="item.key"
              />
            </el-select>
            <el-select
              v-model="listQuery.sort"
              class="filter-item"
              placeholder="文件类型"
              size="mini"
              style="width: 100px;margin-left: 8px"
              @change="handleFilter"
            >
              <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
            </el-select>
            <el-button
              v-waves
              class="filter-item"
              icon="el-icon-search"
              size="mini"
              style="margin-left: 8px"
              type="primary"
              @click="handleFilter"
            >
              {{ $t('table.search') }}
            </el-button>
            <!--      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">-->
            <!--        上传-->
            <!--      </el-button>-->
            <!--      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">-->
            <!--        下载-->
            <!--      </el-button>-->
            <!--      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">-->
            <!--        {{ $t('table.reviewer') }}-->
            <!--      </el-checkbox>-->
          </div>
          <div class="file-view-box">
            <split-pane :default-percent="gutters[1]" split="vertical" @resize="resize">
              <template slot="paneL">
                <div class="left-container">
                  <div class="file-button-box ">
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-dir" />
                    </div>
                    <div class="file-button-title">
                      MAE Info
                    </div>
                    <div class="file-button-right">
                      ﹥
                    </div>
                  </div>
                  <div class="file-button-box file-button-box-selected">
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-dir" />
                    </div>
                    <div class="file-button-title">
                      Process
                    </div>
                    <div class="file-button-right">
                      ﹥
                    </div>
                  </div>
                  <div class="file-button-box ">
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-dir" />
                    </div>
                    <div class="file-button-title">
                      Maintenance
                    </div>
                    <div class="file-button-right">
                      ﹥
                    </div>
                  </div>
                  <div class="file-button-box ">
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-dir" />
                    </div>
                    <div class="file-button-title">
                      Spare parts
                    </div>
                    <div class="file-button-right">
                      ﹥
                    </div>
                  </div>
                  <div class="file-button-box ">
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-dir" />
                    </div>
                    <div class="file-button-title">
                      Code
                    </div>
                    <div class="file-button-right">
                      ﹥
                    </div>
                  </div>
                  <div class="file-button-box ">
                    <div class="file-button-img-box">
                      <div class="file-button-img file-button-img-dir" />
                    </div>
                    <div class="file-button-title">
                      MAE History List
                    </div>
                    <div class="file-button-right">
                      ﹥
                    </div>
                  </div>
                </div>
              </template>
              <template slot="paneR">
                <split-pane :default-percent="gutters[2]" split="vertical" @resize="resize">
                  <template slot="paneL">
                    <div class="left-container">
                      <div class="file-button-box file-button-box-selected">
                        <div class="file-button-img-box">
                          <div class="file-button-img file-button-img-dir" />
                        </div>
                        <div class="file-button-title">
                          Description
                        </div>
                        <div class="file-button-right">
                          ﹥
                        </div>
                      </div>
                      <div class="file-button-box ">
                        <div class="file-button-img-box">
                          <div class="file-button-img file-button-img-dir" />
                        </div>
                        <div class="file-button-title">
                          Failure analysis
                        </div>
                        <div class="file-button-right">
                          ﹥
                        </div>
                      </div>
                      <div class="file-button-box ">
                        <div class="file-button-img-box">
                          <div class="file-button-img file-button-img-dir" />
                        </div>
                        <div class="file-button-title">

                          Historic record&Corrective measures
                        </div>
                        <div class="file-button-right">
                          ﹥
                        </div>
                      </div>
                      <div class="file-button-box ">
                        <div class="file-button-img-box">
                          <div class="file-button-img file-button-img-dir" />
                        </div>
                        <div class="file-button-title">
                          CiP
                        </div>
                        <div class="file-button-right">
                          ﹥
                        </div>
                      </div>
                    </div>
                  </template>
                  <template slot="paneR">
                    <div v-contextmenu:contextmenu1 class="left-container">

                      <split-pane :default-percent="gutters[3]" split="vertical" @resize="resize">
                        <template slot="paneL">
                          <div class="left-container">
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                Key Process
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                Responsible: Fan yongbo
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                Training material
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                MAE List
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                Parameters(Link to Parameter managment System)
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                Specification
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box file-button-box-selected">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                Process Key parts
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>

                          </div>
                        </template>
                        <template slot="paneR">
                          <div v-contextmenu:contextmenu1 class="left-container">
                            <div class="file-button-box file-button-box-selected" @dblclick="dbshow">
                              <div class="file-button-img-box">
                                <div class="file-button-img" />
                              </div>
                              <div class="file-button-title">
                                xxx文档.doc
                              </div>
                              <div class="file-button-right">
                                ﹥
                              </div>
                            </div>
                            <div class="file-button-box ">
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-dir" />
                              </div>
                              <div class="file-button-title">
                                xxx文件夹
                              </div>

                            </div>
                            <div
                              v-contextmenu:contextmenu
                              class="file-button-box"
                              @dblclick="dbshow"
                              @click.right.stop="rightClick"
                            >
                              <div class="file-button-img-box">
                                <div class="file-button-img" />
                              </div>
                              <div class="file-button-title">
                                xxx文档.doc
                              </div>
                            </div>
                            <div
                              v-contextmenu:contextmenu
                              class="file-button-box"
                              @dblclick="dbshow"
                              @click.right.stop="rightClick"
                            >
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-world" />
                              </div>
                              <div class="file-button-title">
                                world文档.doc
                              </div>
                            </div>
                            <div
                              v-contextmenu:contextmenu
                              class="file-button-box"
                              @dblclick="dbshow"
                              @click.right.stop="rightClick"
                            >
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-ppt" />
                              </div>
                              <div class="file-button-title">
                                ppt文档.ppt
                              </div>
                            </div>
                            <div
                              v-contextmenu:contextmenu
                              class="file-button-box"
                              @dblclick="dbshow"
                              @click.right.stop="rightClick"
                            >
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-excel" />
                              </div>
                              <div class="file-button-title">
                                excel文档.xls
                              </div>
                            </div>
                            <div
                              v-contextmenu:contextmenu
                              class="file-button-box"
                              @click.right.stop="rightClick"
                            >
                              <div class="file-button-img-box">
                                <div class="file-button-img file-button-img-zip" />
                              </div>
                              <div class="file-button-title">
                                zip文件.zip
                              </div>
                            </div>
                            <div
                              v-contextmenu:contextmenu
                              :class="{'file-button-box-hover':rightEle==1}"
                              class="file-button-box"
                              @click.right.stop="rightClick"
                            >
                              <div class="file-button-img-box">
                                <div class="file-button-img" />
                              </div>
                              <div class="file-button-title">
                                111111文档.doc
                              </div>
                            </div>
                          </div>
                        </template>
                      </split-pane>
                    </div>
                  </template>
                </split-pane>
              </template>
            </split-pane>
          </div>

        </template>
      </split-pane>
    </div>
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item>{{$t('bs.view')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.download')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.collect')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.replace')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.delete')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.historicalModifications')}}</v-contextmenu-item>
    </v-contextmenu>

    <v-contextmenu ref="contextmenu1">
      <v-contextmenu-item>{{$t('bs.download')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.collect')}}</v-contextmenu-item>
      <v-contextmenu-item>{{$t('bs.uploadFiles')}}</v-contextmenu-item>
    </v-contextmenu>
    <el-drawer
      ref="drawer"
      :before-close="handleClose"
      :modal="false"
      :visible.sync="dialog"
      custom-class="demo-drawer"
      direction="rtl"

      title="筛选查询条件"
    >
      <div class="demo-drawer__content">
        <div style="overflow-y: scroll;height: calc(100vh - 120px)">

          <div style="padding:0px 16px 60px 16px;">
            <el-collapse v-model="activeNames">
              <el-collapse-item name="0" title="编号">
                <el-form :model="form" label-position="top" label-width="100px" size="mini">
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="Location No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="Dep No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="Line No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="MAE No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="Parts No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="Drawing No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="QG No">
                        <el-input v-model="form.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <!--            <el-input size="mini"  v-model="listQuery.title" placeholder="Location No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Dep No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Line No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="MAE NO" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Parts No" style="width: 204px;" class="filter-item"  /><el-input size="mini" v-model="listQuery.title" placeholder="Location No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Drawing no" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="QG No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" :placeholder="$t('bs.productionLine')" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="更新人" style="width: 204px;" class="filter-item"  />-->

                  <!--                <el-form-item label="活动区域" :label-width="formLabelWidth">-->
                  <!--                  <el-select v-model="form.region" placeholder="请选择活动区域">-->
                  <!--                    <el-option label="区域一" value="shanghai"></el-option>-->
                  <!--                    <el-option label="区域二" value="beijing"></el-option>-->
                  <!--                  </el-select>-->
                  <!--                </el-form-item>-->
                </el-form>
              </el-collapse-item>
              <el-collapse-item name="2" title="其它">
                <el-form :model="form" label-position="top" label-width="100px" size="mini">
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item :label="$t('bs.productionLine')">
                        <el-popover
                          placement="top"
                          trigger="click"
                          width="600"
                        >
                          <div>
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="内容"
                              size="mini"
                              style="margin-left: 10px;width: 200px;"
                            />

                            <el-button
                              v-waves
                              class="filter-item"
                              icon="el-icon-search"
                              size="mini"
                              type="primary"
                              @click="handleFilter"
                            >
                              {{ $t('table.search') }}
                            </el-button>
                            <el-table :data="gridData">
                              <el-table-column
                                type="selection"
                                width="55"
                              />
                              <el-table-column label="日期" property="date" width="150" />
                              <el-table-column label="姓名" property="name" width="100" />
                              <el-table-column label="地址" property="address" width="300" />
                            </el-table>
                          </div>
                          <div slot="reference" style="cursor: pointer">
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              :placeholder="$t('bs.productionLine')"
                              size="mini"
                              style="pointer-events:none;"
                            />
                          </div>

                          <!--                          <el-button slot="reference">click 激活</el-button>-->
                        </el-popover>

                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="更新人">
                        <!--                                    <el-input size="mini" v-model="listQuery.title" placeholder=""  class="filter-item"  />-->
                        <el-popover
                          placement="top"
                          trigger="click"
                          width="600"
                        >
                          <div>
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="内容"
                              size="mini"
                              style="width: 204px;"
                            />

                            <el-button
                              v-waves
                              class="filter-item"
                              icon="el-icon-search"
                              size="mini"
                              style="margin-left: 10px"
                              type="primary"
                              @click="handleFilter"
                            >
                              {{ $t('table.search') }}
                            </el-button>
                            <el-table :data="gridData">
                              <el-table-column
                                type="selection"
                                width="55"
                              />
                              <el-table-column label="日期" property="date" width="150" />
                              <el-table-column label="姓名" property="name" width="100" />
                              <el-table-column label="地址" property="address" width="300" />
                            </el-table>
                          </div>
                          <div slot="reference" style="cursor: pointer">
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="更新人"
                              size="mini"
                              style="pointer-events:none;"
                            />
                          </div>

                          <!--                          <el-button slot="reference">click 激活</el-button>-->
                        </el-popover>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="产品名称">
                        <el-input v-model="listQuery.title" class="filter-item" placeholder="" size="mini" />

                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="修改记录">

                        <el-popover
                          placement="top"
                          trigger="click"
                          width="600"
                        >
                          <div>
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="内容"
                              size="mini"
                              style="width: 204px;"
                            />

                            <el-button
                              v-waves
                              class="filter-item"
                              icon="el-icon-search"
                              size="mini"
                              style="margin-left: 10px"
                              type="primary"
                              @click="handleFilter"
                            >
                              {{ $t('table.search') }}
                            </el-button>
                            <el-table :data="gridData">
                              <el-table-column
                                type="selection"
                                width="55"
                              />
                              <el-table-column label="日期" property="date" width="150" />
                              <el-table-column label="姓名" property="name" width="100" />
                              <el-table-column label="地址" property="address" width="300" />
                            </el-table>
                          </div>
                          <div slot="reference" style="cursor: pointer">
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="修改记录"
                              size="mini"
                              style="pointer-events:none;"
                            />
                          </div>

                          <!--                          <el-button slot="reference">click 激活</el-button>-->
                        </el-popover>

                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item :label="$t('bs.supplier')">

                        <el-popover
                          placement="top"
                          trigger="click"
                          width="600"
                        >
                          <div>
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="内容"
                              size="mini"
                              style="margin-left: 10px;width: 200px;"
                            />

                            <el-button
                              v-waves
                              class="filter-item"
                              icon="el-icon-search"
                              size="mini"
                              type="primary"
                              @click="handleFilter"
                            >
                              {{ $t('table.search') }}
                            </el-button>
                            <el-table :data="gridData">
                              <el-table-column
                                type="selection"
                                width="55"
                              />
                              <el-table-column label="日期" property="date" width="150" />
                              <el-table-column label="姓名" property="name" width="100" />
                              <el-table-column label="地址" property="address" width="300" />
                            </el-table>
                          </div>
                          <div slot="reference" style="cursor: pointer">
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              :placeholder="$t('bs.supplier')"
                              size="mini"
                              style="pointer-events:none;"
                            />
                          </div>

                          <!--                          <el-button slot="reference">click 激活</el-button>-->
                        </el-popover>

                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="工艺分类">

                        <el-popover
                          placement="top"
                          trigger="click"
                          width="600"
                        >
                          <div>
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="内容"
                              size="mini"
                              style="width: 204px;"
                            />

                            <el-button
                              v-waves
                              class="filter-item"
                              icon="el-icon-search"
                              size="mini"
                              style="margin-left: 10px"
                              type="primary"
                              @click="handleFilter"
                            >
                              {{ $t('table.search') }}
                            </el-button>
                            <el-table :data="gridData">
                              <el-table-column
                                type="selection"
                                width="55"
                              />
                              <el-table-column label="日期" property="date" width="150" />
                              <el-table-column label="姓名" property="name" width="100" />
                              <el-table-column label="地址" property="address" width="300" />
                            </el-table>
                          </div>
                          <div slot="reference" style="cursor: pointer">
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="修改记录"
                              size="mini"
                              style="pointer-events:none;"
                            />
                          </div>

                          <!--                          <el-button slot="reference">click 激活</el-button>-->
                        </el-popover>

                      </el-form-item>
                    </el-col>
                    <!--                    <el-col :span="12">-->
                    <!--                      <el-form-item label="Drawing No">-->
                    <!--                        <el-input v-model="form.name" autocomplete="off"></el-input>-->
                    <!--                      </el-form-item>-->
                    <!--                    </el-col>-->
                  </el-row>

                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item :label="$t('bs.ProcessSegmentation')">

                        <el-popover
                          placement="top"
                          trigger="click"
                          width="600"
                        >
                          <div>
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="内容"
                              size="mini"
                              style="width: 204px;"
                            />

                            <el-button
                              v-waves
                              class="filter-item"
                              icon="el-icon-search"
                              size="mini"
                              style="margin-left: 10px"
                              type="primary"
                              @click="handleFilter"
                            >
                              {{ $t('table.search') }}
                            </el-button>
                            <el-table :data="gridData">
                              <el-table-column
                                type="selection"
                                width="55"
                              />
                              <el-table-column label="日期" property="date" width="150" />
                              <el-table-column label="姓名" property="name" width="100" />
                              <el-table-column label="地址" property="address" width="300" />
                            </el-table>
                          </div>
                          <div slot="reference" style="cursor: pointer">
                            <el-input
                              v-model="listQuery.title"
                              class="filter-item"
                              placeholder="修改记录"
                              size="mini"
                              style="pointer-events:none;"
                            />
                          </div>

                          <!--                          <el-button slot="reference">click 激活</el-button>-->
                        </el-popover>

                      </el-form-item>
                    </el-col>
                    <!--                    <el-col :span="12">-->
                    <!--                      <el-form-item label="Drawing No">-->
                    <!--                        <el-input v-model="form.name" autocomplete="off"></el-input>-->
                    <!--                      </el-form-item>-->
                    <!--                    </el-col>-->
                  </el-row>

                  <!--            <el-input size="mini"  v-model="listQuery.title" placeholder="Location No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Dep No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Line No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="MAE NO" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Parts No" style="width: 204px;" class="filter-item"  /><el-input size="mini" v-model="listQuery.title" placeholder="Location No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="Drawing no" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="QG No" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" :placeholder="$t('bs.productionLine')" style="width: 204px;" class="filter-item"  />-->
                  <!--            <el-input size="mini" v-model="listQuery.title" placeholder="更新人" style="width: 204px;" class="filter-item"  />-->

                  <!--                <el-form-item label="活动区域" :label-width="formLabelWidth">-->
                  <!--                  <el-select v-model="form.region" placeholder="请选择活动区域">-->
                  <!--                    <el-option label="区域一" value="shanghai"></el-option>-->
                  <!--                    <el-option label="区域二" value="beijing"></el-option>-->
                  <!--                  </el-select>-->
                  <!--                </el-form-item>-->
                </el-form>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div
          class="demo-drawer__footer"
          style="text-align: center;width: 100%;position: absolute;bottom: 0px;padding: 10px;background: #ffffff;border-top:1px solid #f0f2f5"
        >
          <el-button size="mini" @click="cancelForm">取 消</el-button>
          <el-button :loading="loading" size="mini" type="primary" @click="$refs.drawer.closeDrawer()">
            {{ loading ? '提交中 ...' : '确 定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="预览"
      width="90%"
    >
      <div style="height: 60vh" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const calendarTypeOptions = [
  { key: 'By Dep', display_name: 'By Dep' },
  { key: 'By Products', display_name: 'By Products' },
  { key: 'By Process', display_name: 'By Process' },
  { key: 'By Lay out', display_name: 'By Lay out' }
]
import splitPane from 'vue-splitpane'
import waves from '@/directive/waves' // waves directive
export default {
  name: 'Documentation',
  components: { splitPane },
  directives: { waves },
  data() {
    return {
      gutters: [20, 25, 33, 50],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treedata: [{
        label: '101车间',
        children: [{
          label: '产线 1-1',
          children: [
            { label: 'WSD4 A1 ST2011 EP coating' },
            { label: 'WSD4 A1 ST2012 EP coating' },
            { label: 'WSD4 A1 ST2013 EP coating' }
          ]
        },
        {
          label: '102车间',
          children: [
            { label: 'WSD4 A1 ST2021 EP coating' },
            { label: 'WSD4 A1 ST2022 EP coating' },
            { label: 'WSD4 A1 ST2023 EP coating' },
            { label: 'WSD4 A1 ST20024 EP coating' },
            { label: 'WSD4 A1 ST2025 EP coating' }
          ]
        }]
      }, {
        label: '102车间',
        children: [{
          label: '产线 2-1',
          children: [
            { label: 'WSD4 A1 ST2026 EP coating' },
            { label: 'WSD4 A1 ST2027 EP coating' },
            { label: 'WSD4 A1 ST2028 EP coating' }
          ]
        },
        {
          label: '102车间',
          children: [
            { label: 'WSD4 A1 ST2221 EP coating' },
            { label: 'WSD4 A1 ST2222 EP coating' },
            { label: 'WSD4 A1 ST2223 EP coating' },
            { label: 'WSD4 A1 ST2224 EP coating' },
            { label: 'WSD4 A1 ST2225 EP coating' }
          ]
        }]
      }, {
        label: '103车间',
        children: [{
          label: '产线 3-1',
          children: [{
            label: 'WSD4 A1 ST2031 EP coating'
          },
          {
            label: 'WSD4 A1 ST2032 EP coating'
          },
          {
            label: 'WSD4 A1 ST2033 EP coating'
          }
          ]
        }]
      }, {
        label: '104车间',
        children: [{
          label: '产线 4-1',
          children: [{
            label: 'WSD4 A1 ST2041 EP coating'
          },
          {
            label: 'WSD4 A1 ST2042 EP coating'
          },
          {
            label: 'WSD4 A1 ST2043 EP coating'
          }
          ]
        }]
      }],
      activeNames: ['0', '1', '2'],
      dialogVisible: false,
      table: false,
      dialog: false,
      loading: false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '80px',
      timer: null,
      tableKey: 0,
      openfile: ['0', '1'],
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      listQuery: {
        range: '',
        page: 1,
        limit: 20,
        time: '',
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: ''
      },
      downloadLoading: false,
      rightEle: null,
      showReviewer: false,
      sortOptions: [
        { label: '*', key: '0' },
        { label: 'PDF', key: '1' },
        { label: 'word/Excel/PPT', key: '2' },
        { label: 'JPG/Bmp', key: '3' },
        { label: 'Zip/Rar', key: '4' },
        { label: 'Dwg/dwt', key: '5' },
        { label: 'Itp/stp/3ds/stl', key: '6' },
        { label: 'Eip', key: '7' }

      ],
      rangelist: [
        { label: '全部', key: '0' },
        { label: '文件内', key: '1' },
        { label: this.$t('bs.fileName'), key: '2' }
      ],
      contextMenuData: {
        menuName: 'demo',
        // 菜单显示的位置
        axis: {
          x: null,
          y: null
        },
        // 菜单选项
        menulists: [{
          fnHandler: 'home', // 绑定事件
          icoName: 'fa fa-home fa-fw', // icon图标
          btnName: '回到主页' // 菜单名称
        }, {
          fnHandler: 'deletedata',
          icoName: 'fa fa-minus-square-o  fa-fw',
          btnName: '删除布局'
        }]
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleClose() {
      this.dialog = false
      this.dialogVisible = false
    },
    dbshow() {
      this.dialogVisible = true
      console.log('show')
    },
    andleClose(done) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true
          this.timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch(_ => {
        })
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },
    showMenu() {
      event.preventDefault()
      var x = event.clientX
      var y = event.clientY
      // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
    },
    rightClick($event) {
      this.rightEle = 1
    },
    handleCreate() {

    },
    handleDownload() {

    },
    handleFilter() {
      this.listQuery.page = 1
      // this.getList()
    },
    resize() {
      console.log('resize')
    }
  }
}
</script>

<style scoped>
.tree-container {
  margin-top: 8px;
}

.tree-container /deep/ .el-tree-node {
  position: relative;
  padding-left: 13px;
}

.tree-container /deep/ .el-tree-node:before {
  width: 1px;
  height: 100%;
  content: '';
  position: absolute;
  top: -38px;
  bottom: 0;
  left: 0;
  right: auto;
  border-width: 1px;
  border-left: 1px solid #b8b9bb;
}

.tree-container /deep/ .el-tree-node:after {
  width: 13px;
  height: 13px;
  content: '';
  position: absolute;
  left: 0;
  right: auto;
  top: 12px;
  bottom: auto;
  border-width: 1px;
  border-top: 1px solid #b8b9bb;
}

.tree-container /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree-container /deep/ .el-tree .el-tree-node:last-child:before {
  height: 50px;
}

.tree-container /deep/ .el-tree .el-tree-node__content {
  color: #000;
  font-size: 14px;
  padding-left: 0 !important;
}

.tree-container /deep/ .el-tree .el-tree-node__children {
  padding-left: 11.5px;
}

.tree-container /deep/ .el-tree .el-tree-node__content > label.el-checkbox {
  margin: 0 5px 0 5px !important;
}

.tree-container /deep/ .el-tree .el-tree-node__expand-icon {
  position: relative;
  z-index: 99;
}

.tree-container /deep/ .el-tree .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.tree-container /deep/ .el-tree .leaf-node-line {
  width: 23px;
  height: 13px;
  content: '';
  position: absolute;
  left: 13px;
  right: auto;
  top: 12px;
  bottom: auto;
  border-width: 1px;
  border-top: 1px solid #b8b9bb;
}

.tree-container /deep/ .el-tree .el-tree-node__content:has(.is-leaf) {

  margin-left: 24px !important;
}

.el-form-item__label {
  padding: 0px !important;
}

.el-drawer__header {
  margin: 0px !important;
  padding: 16px !important;
}

.demo-drawer {
  width: 300px;
}

.file-view-box {
  height: calc(100vh - 176px);
}

.filter-container {
  border-bottom: 1px solid #cccccc;
  padding: 10px 3px 0px 3px;
  overflow: hidden;
  height: 50px;
}

.file-button-box {
  height: 36px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
}

.file-button-box-selected {
  background: #1067de;
  color: #ffffff !important;
}

.gwbox:hover {
  background: #dcdcdc;
}

.file-button-box:hover {
  background: #dcdcdc;
}

.file-button-box-hover {
  background: #dcdcdc;
}

.file-button-img-box {
  width: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-button-title {
  display: flex;
  align-items: center;
  flex: 1;
}

.file-button-img-DWI {
  background-position: 0px -1800px;
}
.file-button-img-EPM {
  background-position: 0px -1850px;
}
.file-button-img-SPM {
  background-position: 0px -1900px;
}
.file-button-img {
  width: 16px;
  height: 16px;
  background: url('/static/icons-small.png') no-repeat;
}

.file-button-img-dir {
  background-position: 0px -50px;
}

.file-button-img-image {
  background-position: 0px -300px;
}

.file-button-img-music {
  background-position: 0px -350px;
}

.file-button-img-vedio {
  background-position: 0px -400px;
}

.file-button-img-txt {
  background-position: 0px -450px;
}

.file-button-img-pdf {
  background-position: 0px -500px;
}

.file-button-img-world {
  background-position: 0px -1500px;
}

.file-button-img-exe {
  background-position: 0px -900px;
}

.file-button-img-zip {
  background-position: 0px -1150px;
}

.file-button-img-ppt {
  background-position: 0px -1400px;
}

.file-button-img-excel {
  background-position: 0px -1450px;
}

.file-button-right {
  font-size: 18px;
  width: 20px;
}

.components-container {
  position: relative;
  height: calc(100vh - 126px);
  margin: 0px;
  border: 2px solid #cccccc;
}

.left-container {
  /*background-color: #F38181;*/
  overflow-y: auto;
  height: 100%;
  padding: 3px;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 宽度 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc; /* 拇指颜色 */
  border-radius: 5px; /* 圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #dcdcdc; /* 鼠标悬停时的颜色 */
}

.right-container {
  background-color: #FCE38A;
  height: 200px;
}

.top-container {
  background-color: #FCE38A;
  width: 100%;
  height: 100%;
}

.bottom-container {
  width: 100%;
  background-color: #95E1D3;
  height: 100%;
}
</style>
